<template>
  <el-space class="panel-container" direction="vertical" :fill-ratio="100" :size="0" fill wrap>
    <el-tabs v-model="firstActiveTab" type="card" :style="{ height: componentTabsHeight + 'px' }">
      <el-tab-pane name="componentLib">
        <template #label>
          <span><svg-icon icon-class="el-set-up" /> {{ i18nt('designer.componentLib') }}</span>
        </template>
        <el-scrollbar class="components-scrollbar" :style="{ height: componentScrollBarHeight + 'px' }" always>
          <ul @dragover="onDragOver">
            <li v-for="widget in widgetList" :key="widget.type" :class="{
              'field-widget-item': true,
              'field-widget-item-disabled': !designer || widget.disabled
            }" :title="widget.displayName" :draggable="designer && !widget.disabled ? true : false"
              @dblclick="addFieldByDbClick(widget)" @dragstart="onDragStart(widget, $event)">
              <span>
                <svg-icon :icon-class="widget.icon" class-name="color-svg-icon" />
                {{ i18nt(`designer.widgetLabel.${widget.type}`) }}
              </span>
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>

    <div class="resize-line resize-line-vertical" @mousedown="resizeMousedownHandler"></div>

    <el-tabs v-model="secondActiveTab" class="resource-panel-tabs" tab-position="bottom" type="card"
      :style="{ height: resourceTabsHeight + 'px' }" @tab-change="onSecondTabChange">
      <el-tab-pane :label="i18nt('designer.hint.pictureSetting')" name="image">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-switch" @click="replaceResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="image in imageList" :key="image.name" class="list-item"
              @click.stop="selectResource(image, $event)">
              <el-popover placement="right" trigger="hover" :width="230">
                <template #reference>
                  <div>
                    {{ image.name }}
                  </div>
                </template>
                <img :src="image.url" style="height: 150px; width: 200px" />
              </el-popover>
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane :label="i18nt('designer.hint.fontSetting')" name="font">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="font in fontList" :key="font" class="list-item" @click.stop="selectResource(font, $event)">
              {{ font }}
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="音频" name="audio">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="audio in audioList" :key="audio" class="list-item" @click.stop="selectResource(audio, $event)">
              {{ audio }}
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
      <!-- <el-tab-pane label="视频" name="video">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button
            link
            type="primary"
            icon="el-icon-delete"
            @click="deleteAllResource"
          ></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li
              v-for="video in videoList"
              :key="video"
              class="list-item"
              @click.stop="selectResource(video, $event)"
            >
              {{ video }}
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane> -->
      <el-tab-pane label="扩展代码" name="exCode">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="subLua in subLuaList" :key="subLua.name" class="list-item"
              @click.stop="selectResource(subLua, $event)" @dblclick="editResource(subLua)">
              {{ `${subLua.name}.lua` }}
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="GIF" name="gif">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-switch" @click="replaceResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="gif in gifList" :key="gif.name" class="list-item"
                @click.stop="selectResource(gif, $event)">
              <el-popover placement="right" trigger="hover" :width="230">
                <template #reference>
                  <div>
                    {{ gif.name }}
                  </div>
                </template>
                <img :src="gif.url" style="height: 150px; width: 200px" />
              </el-popover>
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="BIN字库" name="binFont">
        <div class="resource-setting-toolbar">
          <el-button link type="primary" icon="el-icon-plus" @click="importResource"></el-button>
          <el-button link type="primary" icon="el-icon-minus" @click="deleteResource"></el-button>
          <el-button link type="primary" icon="el-icon-delete" @click="deleteAllResource"></el-button>
        </div>
        <el-scrollbar class="widget-scrollbar" :style="{ height: resourceScrollBarHeight + 'px' }" always>
          <ul class="resource-list">
            <li v-for="binFont in binFontList" :key="binFont" class="list-item" 
                @click.stop="selectResource(binFont, $event)">
              {{ binFont }}
            </li>
          </ul>
        </el-scrollbar>
      </el-tab-pane>

    </el-tabs>
  </el-space>
  <el-dialog
    v-model="binFontDialogVisible"
    title="导入BIN字库"
    width="500px"
    :before-close="handleBinFontDialogClose"
  >
    <el-form :model="binFontForm" label-width="120px">
      <el-form-item label="BIN字库文件">
        <el-input v-model="binFontForm.filePath" readonly>
          <template #append>
            <el-button @click="selectBinFontFile">选择文件</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="字号" prop="fontSize">
        <el-select v-model="binFontForm.fontSize" placeholder="请选择字号">
          <el-option
            v-for="n in 25"
            :key="n"
            :label="n + 1"
            :value="n + 1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="对应语言" prop="language">
        <el-select v-model="binFontForm.language" placeholder="请选择语言">
          <el-option
            v-for="n in 10"
            :key="n"
            :label="'语言' + n"
            :value="n"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="binFontDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmImportBinFont">确认导入</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { widgetList as BFS } from './widgetsConfig'
import * as ELECTION from '@/electron'
import * as EVENTS from '@/designer/event'
import { SELECT_BIN_FONT_FILE, IMPORT_BIN_FONT_WITH_OPTIONS } from '@/designer/event'

export default {
  name: 'WidgetPanel',
  inject: ['getDesignerConfig'],
  props: {
    subLuaList: Array,
    designer: Object,
    configPath: String,
    mainHeight: {
      type: Number,
      default: window.innerHeight - 64
    }
  },
  emits: ['addSubLuaCode', 'editSubLuaCode', 'deleteSubLuaCode', 'deleteAllSubLuaCode'],
  data() {
    return {
      resourceLoading: false,
      // 页面设置
      designerConfig: this.getDesignerConfig(),

      // 第一个Tabs激活的Tab
      firstActiveTab: 'componentLib',
      widgetList: [],

      // 资源, font,image,audio,video
      secondActiveTab: 'image',
      fontList: [],
      imageList: [],
      audioList: [],
      videoList: [],
      gifList: [],
      binFontList: [],
      selectedResource: null,
      // BIN字库弹框相关
      binFontDialogVisible: false,
      binFontForm: {
        filePath: '',
        fontSize: null,
        language: null
      },
      selectedBinFontFile: null,

      // resize
      componentTabsHeight: 300,
      isResizing: false
    }
  },
  computed: {
    resourceTabsHeight() {
      return this.mainHeight - this.componentTabsHeight - 8
    },
    componentScrollBarHeight() {
      return this.componentTabsHeight - 25
    },
    resourceScrollBarHeight() {
      return this.resourceTabsHeight - 80
    }
  },
  watch: {
    configPath: {
      handler(val) {
        if (val) {
          this.loadResources()
        }
      }
    }
  },
  mounted() {
    // 监听BIN字库导入结果
  this.$emitter.on('import-bin-font-result', this.handleImportBinFontResult);
  
  // 添加BIN字库导入成功的事件监听
  this.$emitter.on('BIN_FONT_IMPORT_SUCCESS', this.handleBinFontImportSuccess);
  this.$emitter.on('BIN_FONT_IMPORT_FAILED', this.handleBinFontImportFailed);
    // 加载组件
    this.loadWidgets()

    // 监听资源相关事件
    this.initResourcesEvent()

    this.$emitter.on(ELECTION.DELETE_RESOURCE_BY_NAME_RESULT, this.deleteResourceByNameResult)

    this.$emitter.on(EVENTS.GET_IMAGE_RESOURCE, this.getImageResource)
    this.$emitter.on(EVENTS.GET_IMAGE_RESOURCE_LIST, this.getImageResourceList)

    this.$emitter.on(EVENTS.GET_GIF_RESOURCE, this.getGifResource)
    this.$emitter.on(EVENTS.GET_GIF_RESOURCE_LIST, this.getGifResourceList)

    this.$emitter.on(EVENTS.GET_AUDIO_RESOURCE, this.getAudioResource)
    this.$emitter.on(EVENTS.GET_AUDIO_RESOURCE_LIST, this.getAudioResourceList)

    this.$emitter.on(EVENTS.GET_VIDEO_RESOURCE, this.getVideoResource)
    this.$emitter.on(EVENTS.GET_VIDEO_RESOURCE_LIST, this.getVideoResourceList)

    this.$emitter.on(EVENTS.GET_FONT_RESOURCE_LIST, this.getFontResourceList)

    document.addEventListener('mousemove', this.resizeMousemoveHandler)
    document.addEventListener('mouseup', this.resizeMouseupHandler)
  },
  unmounted() {
    this.$emitter.off('import-bin-font-result', this.handleImportBinFontResult);
  this.$emitter.off('BIN_FONT_IMPORT_SUCCESS', this.handleBinFontImportSuccess);
  this.$emitter.off('BIN_FONT_IMPORT_FAILED', this.handleBinFontImportFailed);
    document.removeEventListener('mousemove', this.resizeMousemoveHandler)
    document.removeEventListener('mouseup', this.resizeMouseupHandler)
  },
  methods: {
    handleBinFontImportSuccess() {
    this.$message.success('BIN字库导入成功');
    // 可以在这里手动刷新一次资源，但确保不会重复
    this.loadResources();
  },
  
  handleBinFontImportFailed(error) {
    this.$message.error(`BIN字库导入失败: ${error}`);
  },
    handleImportBinFontResult(result) {
    if (result.success) {
      this.$message.success('BIN字库导入成功');
      // 手动刷新资源列表
      this.loadResources();
    } else {
      this.$message.error(`BIN字库导入失败: ${result.error}`);
    }
  },
    // 选择BIN字库文件
    selectBinFontFile() {
  this.$emitter.emit(SELECT_BIN_FONT_FILE, (filePath) => {
    if (filePath) {
      this.binFontForm.filePath = filePath;
      this.selectedBinFontFile = filePath;
    }
  });
},
    // 确认导入BIN字库
confirmImportBinFont() {
  if (!this.binFontForm.filePath) {
    this.$message.error('请选择BIN字库文件');
    return;
  }
  
  if (!this.binFontForm.fontSize) {
    this.$message.error('请选择字号');
    return;
  }
  
  if (!this.binFontForm.language) {
    this.$message.error('请选择对应语言');
    return;
  }
  
  console.log('开始导入BIN字库:', this.binFontForm);
  
  // 使用正确的事件名称
  this.$emitter.emit('IMPORT_RESOURCE_BIN_FONT_WITH_OPTIONS', {
    filePath: this.binFontForm.filePath,
    language: this.binFontForm.language,
    fontSize: this.binFontForm.fontSize
  });
  
  // 关闭弹框
  this.binFontDialogVisible = false;
  this.resetBinFontForm();
  
  // 显示导入成功消息（资源刷新会在后台自动进行）
  //this.$message.success('BIN字库导入中...');
},
    // 重置BIN字库表单
    resetBinFontForm() {
      this.binFontForm = {
        filePath: '',
        fontSize: null,
        language: null
      };
      this.selectedBinFontFile = null;
    },
    
    // 处理弹框关闭
    handleBinFontDialogClose(done) {
      this.resetBinFontForm();
      done();
    },
    resizeMousedownHandler() {
      this.isResizing = true
    },
    resizeMouseupHandler() {
      this.isResizing = false
    },
    resizeMousemoveHandler(e) {
      if (this.isResizing) {
        this.componentTabsHeight = Math.floor(this.componentTabsHeight + e.movementY)
        if (this.componentTabsHeight < 100) {
          this.componentTabsHeight = 100
        } else if (this.componentTabsHeight > this.mainHeight - 100) {
          this.componentTabsHeight = this.mainHeight - 100
        }
      }
    },
    loadWidgets() {
      this.widgetList = BFS.map((config) => {
        return {
          ...config,
          displayName: this.i18nt(`designer.widgetLabel.${config.type}`)
        }
      })
    },

    //加载资源
    initResourcesEvent() {
      this.$emitter.on(ELECTION.LOAD_RESOURCE_FONT_COMPLETE, (fontList) => {
        this.fontList = fontList
        this.getFontResourceList()
        this.fontList.forEach((item) => {
          this.getFontResource(item)
        })
      })
      this.$emitter.on(ELECTION.LOAD_RESOURCE_BIN_FONT_COMPLETE, (binFontList) => {
  // 去重处理
  this.binFontList = [...new Set(resources.binFontList || [])];
      this.getBinFontResourceList();
});

      this.$emitter.on(ELECTION.LOAD_RESOURCE_IMAGE_COMPLETE, (imageList) => {
        this.imageList = imageList.map((item) => {
          return {
            ...item,
            url: URL.createObjectURL(new Blob([item.fileData], { type: 'image/png' }))
          }
        })
        this.getImageResourceList()
        this.imageList.forEach((item) => {
          this.getImageResource(item.name)
        })
      })

      this.$emitter.on(ELECTION.LOAD_RESOURCE_GIF_COMPLETE, (gifList) => {
        this.gifList = gifList.map((item) => {
          return {
            ...item,
            url: URL.createObjectURL(new Blob([item.fileData], { type: 'image/git' }))
          }
        })
        this.getImageResourceList()
        this.gifList.forEach((item) => {
          this.getImageResource(item.name)
        })
      })

      this.$emitter.on(ELECTION.LOAD_RESOURCE_AUDIO_COMPLETE, (audioList) => {
        this.audioList = audioList
        this.getAudioResourceList()
        this.audioList.forEach((item) => {
          this.getAudioResource(item.name)
        })
      })

      this.$emitter.on(ELECTION.LOAD_RESOURCE_VIDEO_COMPLETE, (videoList) => {
        this.videoList = videoList
        this.getVideoResourceList()
        this.videoList.forEach((item) => {
          this.getVideoResource(item.name)
        })
      })

      this.$emitter.on(ELECTION.REFRESH_RESOURCE_COMPLETE, (resources) => {
        // 确保BIN字库列表去重
  this.binFontList = [...new Set(resources.binFontList || [])];
  this.getBinFontResourceList();
        this.fontList = resources.fontList
        this.getFontResourceList()
        this.fontList.forEach((item) => {
          this.getFontResource(item)
        })

        this.imageList = resources.imageList.map((item) => {
          return {
            ...item,
            url: URL.createObjectURL(new Blob([item.fileData], { type: 'image/png' }))
          }
        })
        this.getImageResourceList()
        this.imageList.forEach((item) => {
          this.getImageResource(item.name)
        })

        this.audioList = resources.audioList
        this.getAudioResourceList()
        this.audioList.forEach((item) => {
          this.getAudioResource(item.name)
        })

        this.videoList = resources.videoList
        this.getVideoResourceList()
        this.videoList.forEach((item) => {
          this.getVideoResource(item.name)
        })

        this.gifList = resources.gifList.map((item) => {
          return {
            ...item,
            url: URL.createObjectURL(new Blob([item.fileData], { type: 'image/git' }))
          }
        })
        this.getGifResourceList()
        this.gifList.forEach((item) => {
          this.getGifResource(item.name)
        })
      })
    },

    // 添加bin字库资源获取方法
  getBinFontResource(name) {
    this.$emitter.emit(EVENTS.GET_BIN_FONT_RESOURCE_RESULT, {
      name,
      result: this.binFontList.find((item) => item === name)
    })
  },
  getBinFontResourceList() {
    this.$emitter.emit(EVENTS.GET_BIN_FONT_RESOURCE_LIST_RESULT, this.binFontList)
  },
    // 修改资源加载方法，添加防重复逻辑
  loadResources() {
    // 添加防抖逻辑，避免重复刷新
    if (this.resourceLoading) return;
    
    this.resourceLoading = true;
    this.$emitter.emit(ELECTION.REFRESH_RESOURCE);
    
    // 300ms后重置加载状态
    setTimeout(() => {
      this.resourceLoading = false;
    }, 300);
  },

    onDragStart(widget, evt) {
      evt.dataTransfer.effectAllowed = 'copy'

      const widgetCopy = this.designer.copyNewFieldWidget(widget)
      widgetCopy.offset = {
        x: evt.offsetX,
        y: evt.offsetY
      }
      this.designer.drag(widgetCopy)
    },

    onDragOver(evt) {
      evt.preventDefault()
    },

    addFieldByDbClick(widget) {
      this.designer.addFieldByDbClick(widget)
    },
    onSecondTabChange() {
      this.selectedResource = null
    },
    importResource() {
      if (!this.checkOpenedWorkspace()) {
        return
      }

      if (this.secondActiveTab === 'image') {
        this.$emitter.emit(ELECTION.IMPORT_RESOURCE_IMAGE)
      } else if (this.secondActiveTab === 'video') {
        this.$emitter.emit(ELECTION.IMPORT_RESOURCE_VIDEO)
      } else if (this.secondActiveTab === 'audio') {
        this.$emitter.emit(ELECTION.IMPORT_RESOURCE_AUDIO)
      } else if (this.secondActiveTab === 'font') {
        this.$emitter.emit(ELECTION.IMPORT_RESOURCE_FONT)
      } else if (this.secondActiveTab === 'exCode') {
        this.$emit('addSubLuaCode')
      } else if (this.secondActiveTab === 'gif') {
        this.$emitter.emit(ELECTION.IMPORT_RESOURCE_GIF)
      }
      if (this.secondActiveTab === 'binFont') {
        // 显示BIN字库选择弹框
        this.binFontDialogVisible = true;
        return;
      }
    },
    addSubLua() {
      this.$emit('addSubLuaCode')
    },
    selectResource(resource, event) {
      this.selectedResource = resource
      const parentElement = event.currentTarget.parentElement
      parentElement.children.forEach((item) => {
        item.classList.remove('selected')
      })
      event.currentTarget.classList.add('selected')
    },
    replaceResource() {
      if (!this.checkOpenedWorkspace()) {
        return
      }

      if (!this.selectedResource) {
        this.$message.error('请先选择要替换的资源')
        return
      }

      if(this.secondActiveTab === 'image') {
        this.$emitter.emit(
          ELECTION.REPLACE_RESOURCE_IMAGE,
          typeof this.selectedResource === 'string'
            ? this.selectedResource
            : this.selectedResource.name
        )
      }
      else if (this.secondActiveTab === 'gif') {
        this.$emitter.emit(
          ELECTION.REPLACE_RESOURCE_GIF,
          typeof this.selectedResource === 'string'
            ? this.selectedResource
            : this.selectedResource.name
        )
      }
      else {
        return
      }
    },

    editResource(resource) {
      if (!this.checkOpenedWorkspace()) {
        return;
      }

      if (!resource) {
        this.$message.error('请先选择要编辑的资源');
        return;
      }

      this.selectedResource = resource;
      const editResourceName = typeof resource === 'string' ? resource : resource.name;

      // 编辑扩展代码
      if (editResourceName.startsWith('sub')) {
        this.$emit('editSubLuaCode', editResourceName);
      }
    },

    deleteResource() {
      if (!this.checkOpenedWorkspace()) {
        return
      }

      if (!this.selectedResource) {
        this.$message.error('请先选择要删除的资源')
        return
      }

      const deleteResourceName =
        typeof this.selectedResource === 'string'
          ? this.selectedResource
          : this.selectedResource.name

      this.$confirm(`确定要删除 ${deleteResourceName} 吗？`)
        .then(() => {
          // 删除扩展代码
          if (deleteResourceName.startsWith('sub')) {
            this.$emit('deleteSubLuaCode', deleteResourceName)
          } else {
            this.$emitter.emit(ELECTION.DELETE_RESOURCE_BY_NAME, deleteResourceName)
          }
        })
        .catch(() => { })
    },
    deleteResourceByNameResult({ name, result }) {
      if (result === 'success') {
        this.fontList = this.fontList.filter((item) => item !== name)
        this.getFontResource(name)
        this.getFontResourceList()

        this.imageList = this.imageList.filter((item) => item.name !== name)
        this.getImageResource(name)
        this.getImageResourceList()

        this.videoList = this.videoList.filter((item) => item !== name)
        this.getVideoResource(name)
        this.getVideoResourceList()

        this.audioList = this.audioList.filter((item) => item !== name)
        this.getAudioResource(name)
        this.getAudioResourceList()

        this.gifList = this.gifList.filter((item) => item.name !== name)
        this.getGifResource(name)
        this.getGifResourceList()

        this.binFontList = this.binFontList.filter((item) => item !== name)
        this.getBinFontResource(name)
        this.getBinFontResourceList()

        this.$message.info(`删除${name}成功`)
        return
      }
      this.$message.error(`删除${name}失败`)
    },
    deleteAllResource() {
      if (!this.checkOpenedWorkspace()) {
        return
      }
      const typeMessage =
      this.secondActiveTab === 'binFont'
        ? 'BIN字库'
       : this.secondActiveTab === 'image'
          ? '图片'
          : this.secondActiveTab === 'video'
            ? '视频'
            : this.secondActiveTab === 'audio'
              ? '音频'
              : this.secondActiveTab === 'font'
                ? '字体'
                : this.secondActiveTab === 'exCode'
                  ? '扩展代码'
                  : this.secondActiveTab === 'gif'
                    ? 'gif'
                    : ''
      if (!typeMessage) {
        this.$info(`请删除正确的资源类型`)
        return
      }

      this.$confirm(`确定要删除所有${typeMessage}资源吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.secondActiveTab === 'exCode') {
            this.$emit('deleteAllSubLuaCode')
            return
          }
          this.$emitter.emit(ELECTION.DELETE_RESOURCE, this.secondActiveTab)
          if (this.secondActiveTab === 'image') {
            const imageNames = this.imageList.map((item) => item.name)
            this.imageList = []
            this.getImageResourceList()
            imageNames.forEach((name) => {
              this.getImageResource(name)
            })
          } else if (this.secondActiveTab === 'video') {
            const videoNames = this.videoList.map((item) => item)
            this.videoList = []
            this.getVideoResourceList()
            videoNames.forEach((name) => {
              this.getVideoResource(name)
            })
          } else if (this.secondActiveTab === 'audio') {
            const audioNames = this.audioList.map((item) => item)
            this.audioList = []
            this.getAudioResourceList()
            audioNames.forEach((name) => {
              this.getAudioResource(name)
            })
          } else if (this.secondActiveTab === 'font') {
            const fontNames = this.fontList.map((item) => item)
            this.fontList = []
            this.getFontResourceList()
            fontNames.forEach((name) => {
              this.getFontResource(name)
            })
          } else if (this.secondActiveTab === 'gif') {
            const gifNames = this.gifList.map((item) => item.name)
            this.gifList = []
            this.getGifResourceList()
            gifNames.forEach((name) => {
              this.getGifResource(name)
            })
          }if (this.secondActiveTab === 'binFont') {
      const binFontNames = this.binFontList.map((item) => item)
      this.binFontList = []
      this.getBinFontResourceList()
      binFontNames.forEach((name) => {
        this.getBinFontResource(name)
      })
    }
        })
        .catch(() => { })
    },

    getFontResource(name) {
      this.$emitter.emit(EVENTS.GET_FONT_RESOURCE_RESULT, {
        name,
        result: this.fontList.find((item) => item.name === name)
      })
    },
    getFontResourceList() {
      this.$emitter.emit(EVENTS.GET_FONT_RESOURCE_LIST_RESULT, this.fontList)
    },

    getImageResource(da) {
      if( typeof da === 'string') {
        this.$emitter.emit(EVENTS.GET_IMAGE_RESOURCE_RESULT, {
          id: '',
          name: da,
          result: this.imageList.find((item) => item.name === da)
        })
      }
      else {
        this.$emitter.emit(EVENTS.GET_IMAGE_RESOURCE_RESULT, {
          ...da,
          result: this.imageList.find((item) => item.name === da.name)
        })
      }
    },
    getImageResourceList() {
      this.$emitter.emit(EVENTS.GET_IMAGE_RESOURCE_LIST_RESULT, this.imageList)
    },

    getGifResource(da) {
      this.$emitter.emit(EVENTS.GET_GIF_RESOURCE_RESULT, {
        ...da,
        result: this.gifList.find((item) => item.name === da.name)
      })
    },
    getGifResourceList() {
      this.$emitter.emit(EVENTS.GET_GIF_RESOURCE_LIST_RESULT, this.gifList)
    },

    getAudioResource(name) {
      this.$emitter.emit(EVENTS.GET_AUDIO_RESOURCE_RESULT, {
        name,
        result: this.audioList.find((item) => item === name)
      })
    },
    getAudioResourceList() {
      this.$emitter.emit(EVENTS.GET_AUDIO_RESOURCE_LIST_RESULT, this.audioList)
    },

    getVideoResource(name) {
      this.$emitter.emit(EVENTS.GET_VIDEO_RESOURCE_RESULT, {
        name,
        result: this.videoList.find((item) => item === name)
      })
    },
    getVideoResourceList() {
      this.$emitter.emit(EVENTS.GET_VIDEO_RESOURCE_LIST_RESULT, this.videoList)
    },
    checkOpenedWorkspace() {
      if (!this.configPath) {
        this.$message.error('请先新建/打开一个项目')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-container {
  width: 100%;

  :deep(.el-tabs) {
    padding: 0 0 0 4px;
  }

  ul {
    padding-left: 10px;
    /* 重置IE11默认样式 */
    margin: 0;
    /* 重置IE11默认样式 */
    margin-block-start: 0;
    margin-block-end: 0.25em;
    padding-inline-start: 10px;

    &:after {
      content: '';
      display: block;
      clear: both;
    }

    .field-widget-item {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      font-size: 11px;
      width: 98px;
      margin: 2px 6px 6px 0;
      cursor: move;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      background: #fff;
      border: 1px solid #e8e9eb;
      border-radius: 4px;
      padding: 0 8px;

      .color-svg-icon {
        -webkit-font-smoothing: antialiased;
        color: #7c7d82;
      }

      &:hover {
        color: $--color-primary;
        background: #ffeaa6;
        border-color: #e49c05;

        .color-svg-icon {
          color: $--color-primary;
        }
      }
    }

    .field-widget-item.field-widget-item-disabled {
      color: #808080;
      cursor: not-allowed;

      &:hover {
        background: #e8e9eb;
        border-color: #e8e9eb;

        .color-svg-icon {
          color: #808080;
          fill: #808080;
        }
      }
    }
  }

  .resource-panel-tabs {
    .resource-setting-toolbar {
      :deep(.el-button) {
        margin-left: 2px;
      }

      svg {
        width: 1.2em;
        height: 1.2em;
      }
    }

    :deep(.el-tabs__item) {
      padding: 0 10px;
    }

    ul.resource-list {
      padding: 5px 10px;
      list-style: none;

      .list-item {
        line-height: 24px;
        font-size: 11px;

        &:hover {
          background-color: #ffeaa6;
        }

        &.selected {
          background-color: #ffeaa6;
        }
      }
    }
  }
}
</style>
